<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <el-button @click="addInfo" type="primary" icon="el-icon-circle-plus" circle size="mini">
            </el-button>
            <!-- @selection-change="handleSelectionChange"  @click="addInfo" -->
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="title" label="標題" width="width">
                </el-table-column>
                <el-table-column prop="content" label="公告详情" width="width">
                    <template slot-scope="scope">
                        <span v-html="scope.row.content"></span>
                    </template>
                </el-table-column>
                <el-table-column prop="adminSender.userName" label="发布者">
                    <template slot-scope="scope">
                        <span>{{ scope.row.adminSender.userName }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="发生时间" width="width">
                </el-table-column>
                <el-table-column label="操作" show-overflow-tooltip>
                    <template slot-scope="{row,$index}">
                        <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="deleteItem(row)">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- //分页器 -->
            <div style="display:table;margin:0 auto;margin-top:10px">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="pageInfo.current" :page-sizes="[3, 5, 9]" :page-size="pageInfo.pageSize"
                    layout="total,sizes, prev, pager, next" :total="pageInfo.totalItems"></el-pagination>
            </div>
        </el-card>
        <!-- //对话框 -->
        <el-dialog :visible.sync="dialogVisible" width="70%">
            <el-form :model="rulerform" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
                <el-form-item label="标题">
                    <el-input v-model="rulerform.title"></el-input>
                </el-form-item>
                <!-- //富文本框 -->
                <el-form-item label="内容">
                    <quill-editor v-model="rulerform.content"></quill-editor>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="publishOne">发布</el-button>
                    <el-button>返回</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

    </div>
</template>

<script>
import { reqGetList, reqAddOne, reqDeleteItem, reqGetPage } from '@/api/announce'
import { quillEditor } from 'vue-quill-editor'
export default {
    name: 'announce',
    components: {
        quillEditor
    },
    data() {
        return {
            //分页信息
            pageInfo: {
                current: 1,
                pageSize: 10,
                searchkey: "",
                totalItems: 5,
                totalPage: 1,
                type: "1"
            },
            multipleSelection: [],
            dialogVisible: false,
            tableData: [],
            rulerform: {
                title: '',
                content: ''
            },
            rules: {}
        }

    },
    mounted() {
        // 掛載頁面
        this.getList()
    },
    methods: {
        //掛載頁面、
        async getList() {
            let result = await reqGetList()
            this.tableData = result.data.docs
        },
        //添加
        //添加信息
        addInfo() {
            this.dialogVisible = true
        },
        //删除
        deleteItem(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await reqDeleteItem({ ids: row.id })
                // 掛載頁面
                this.getList()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 只获得文字去掉标签
        removeTAG() {
            console.log(this.rulerform.content);
            return this.rulerform.content.replace(/<[^>]+>/g, "")
        },
        //发布表单内容
        async publishOne() {
            var str = this.removeTAG()
            console.log(str);
            const { title } = this.rulerform
            let result = await reqAddOne({ content: str, title })
            if (result.status == 200) {
                this.$message({ type: 'success', message: '添加成功' })
            }
            // 掛載頁面
            this.getList()
            this.dialogVisible = false
        },
        onEditorChange(event) {
            console.log('onEditorChange')
        },

        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //分页
        async renderPageList(current = 1, pageSize = 10) {
            let searchkey = this.pageInfo ? this.pageInfo.searchkey : "";
            let state = this.pageInfo ? this.pageInfo.state : "";
            let user = this.pageInfo ? this.pageInfo.user : "";
            let targetCurrent = current;
            let result = await reqGetPage({
                current: targetCurrent,
                pageSize,
                searchkey
            });
            this.tableData = result.data.docs
            //ComponentPaginationEnd
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            let current = this.pageInfo ? this.pageInfo.current : 1;
            this.renderPageList(current, val);
            this.pageInfo.pageSize = val
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            let pageSize = this.pageInfo ? this.pageInfo.pageSize : 10;
            this.renderPageList(val, pageSize);
        },

    },
}
</script>

<style>
</style>